@media screen and (min-width: 700px) {
  body {
    background-image: url(/static/my/img/login/anime.svg);
    background-size: cover
  }
}

@media screen and (max-width: 700px) {
  main {
    width: 90%;

    .top {
      .other_login {
        &::before, &::after {
          width: 38%;
        }

      }
    }
  }
}

@media screen and (max-width: 550px) {
  main {
    .top {
      .login_forms {
        .code {
          input {
            width: 50%;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 450px) {
  main {
    background-color: transparent;
    box-shadow: none;
    display: flex;
    justify-content: center;
    position: relative;
    width: 90%;
    height: 100vh;


    .top {
      padding: 0;
      position: absolute;
      margin-top: 40%;
      transform: translateY(-50%);

      .other_login {
        &::before, &::after {
          display: none;
        }

      }

      .login_forms {
        .code {
          input {
            width: 46%;
          }
        }
      }
    }

    .bottom {
      img {
        margin-bottom: 10%;
        position: absolute;
        height: 226px;
      }
    }
  }
}
